<template>
    <li>
        <el-tooltip effect="dark" content="边颜色" placement="left">
            <span class="color">
                <el-color-picker v-model="node.style.stroke" @change="getColor" />
            </span>
        </el-tooltip>
    </li>
    <li>
        <el-tooltip effect="dark" content="文本颜色" placement="left">
            <span class="color">
                <el-color-picker v-model="node.labelCfg.style.fill" @change="getColor" />
            </span>
        </el-tooltip>
    </li>
    <li v-for="item in edgeAction" :key="item.id" @click="change(item)">
        <el-tooltip effect="dark" :content="item.name" placement="left">
            <svg class="icon" :class="item.class || ''" aria-hidden="true">
                <use :xlink:href="`#icon-${item.icon}`"></use>
            </svg>
        </el-tooltip>
    </li>
</template>

<script lang='ts' setup>import { Action } from '../props';

interface IProps {
    node: any
}
const props = defineProps<IProps>()
const emit = defineEmits<{
    (event:"change",value:any):void
}>()

// 边配置项
let edgeAction:Action[] = [
    {
        "id": "eadd",
        "name": "添加文字",
        "icon": "wenzi",
        "type": "text-add",
        "model": '',
        "action":()=>{}
    },
    {
        "id": "e0",
        "name": "字体增加",
        "icon": "zitijiada",
        "type": "size",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.style.fontSize >= 20 ? null : node.labelCfg.style.fontSize += 2
        }
    },
    {
        "id": "e01",
        "name": "字体减小",
        "icon": "zitijianxiao",
        "type": "size",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.style.fontSize <= 10 ? null : node.labelCfg.style.fontSize -= 2
        }
    },
    {
        "id": "e1",
        "name": "文本左平移",
        "icon": "a-zuojiantouzhixiangzuojiantou",
        "type": "",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.refX -= 2
        }
    },
    {
        "id": "e2",
        "name": "文本右平移",
        "icon": "a-youjiantouzhixiangyoujiantou",
        "type": "",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.refX += 2
        }
    },
    {
        "id": "e3",
        "name": "文本上平移",
        "icon": "uparrow",
        "type": "",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.refY += 2
        }
    },
    {
        "id": "e4",
        "name": "文本下平移",
        "icon": "downarrow",
        "type": "",
        "model": '',
        // 操作
        "action": (node: any) => {
            node.labelCfg.refY -= 2
        }
    },
    {
        "id": "e5",
        "name": "边加宽",
        "icon": "xian",
        "type": "",
        "model": '',
        "class": 'big',
        // 操作
        "action": (node: any) => {
            node.style.lineWidth += 1
        }
    },
    {
        "id": "e6",
        "name": "边缩窄",
        "icon": "xian",
        "type": "",
        "class": 'small',
        "model": '',
        // 操作
        "action": (node: any) => {
            node.style.lineWidth  === 1 ? null :node.style.lineWidth -= 1
        }
    },
]
const change = (item: Action) => {
    if (item.type === 'text-add') {
        emit('change', item)
        return
    } else {
        item.action(props.node)
        emit('change', props.node)
    }
   
}
// 获取颜色
const getColor = (color: string, item: any) => {
    emit('change', props.node)
}

</script>

<style scope>

</style>